<template>
  <CheckboxGroup v-model="selectedItems" @on-change="selectCheckbox">
    <p class="label-type">名词</p>
    <div class="checkbox-container">
      <Checkbox v-for="item in labels['noun']" :label="item" :key="item" ref="checkboxGroup">
        <span>{{ item }}</span>
      </Checkbox>
    </div>
    <p class="label-type">动词</p>
    <div class="checkbox-container">
      <Checkbox v-for="item in labels['verb']" :label="item" :key="item" ref="checkboxGroup">
        <span>{{ item }}</span>
      </Checkbox>
    </div>
    <p class="label-type">形容词</p>
    <div class="checkbox-container">
      <Checkbox v-for="item in labels['adj']" :label="item" :key="item" ref="checkboxGroup">
        <span>{{ item }}</span>
      </Checkbox>
    </div>
  </CheckboxGroup>
</template>

<script>
export default {
  name: "LabelItem",
  computed: {
    labels: {
      get() {
        return this.$store.state.labels
      },
      set(val) {
        this.$store.commit('setLabels', val)
      }
    },
  },
  props: ['label', 'selectedItems'],
  data() {
    return {
    }
  },
  methods: {
    selectCheckbox() {
      console.log(this.label, this.selectedItems)
      this.$emit('update-label', this.label, this.selectedItems)
    },
  }
}
</script>

<style scoped>
.ivu-checkbox-group {
  width: 90%;
  margin: 0 auto 15px;
}

.ivu-checkbox {
  line-height: 1rem;
}

.label-type {
  display: block;
  text-align: start;
  font-weight: bold;
  margin: 0 -5px 10px;
}

.checkbox-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: start;
  grid-gap: 20px;
  margin-bottom: 20px;
}

</style>